<template>
	<view class="container plr-30 pt-20 bg">
		<view class="flex flex-start flex-top mb-30 radius-20 plr-30 ptb-30" v-for="(item,index) in list"
			:key="index" >
			<image :src="item.image" @click="goDetails(item.id)" class="itemImg mr-20 radius-20"></image>
			<view style="width:72%;">
				<view>
					<view class="conttop">
						<view class="white size-30 mb-66" @click="goDetails(item.id)">
							{{item.name}}
						</view>
						<view class="goodsid white">
							商品编号：{{item.id}}
						</view>
					</view>
					
					<view class="flex flex-between white">
						<view class="size-30">
							￥{{item.price}}
						</view>
						<view class="size-24">
							<text v-if="item.status==1">持有中</text>
							<text v-if="item.status==2">挂售中</text>
							<text v-if="item.status==3">交易中</text>
							<text v-if="item.status==4">已出售</text>
							<!-- <text v-if="item.status==5">已转赠</text> -->
							<text v-if="item.status==6">已合成</text>
						</view>
					</view>
				</view>
				<view class="flex mt-40 btnWrap" style="float: right;">
					<!-- <u-button round class="saleBtn" @click.stop="changePrice(item)" v-if="item.status==1||item.status==2">改价</u-button> -->
					<u-button round class="transferBtn" @click.stop="toTransfer(item.id)" v-if="item.status==1||item.status==2">转赠</u-button>
					<u-button round class="saleBtn" @click.stop="toSale(item)" v-if="item.status==1&&is_trade==1">出售</u-button>
					<u-switch v-model="item.is_show==1?true:false" v-if="item.status==2" active-color="#EFAA1C" @change="upCollect(item)"></u-switch>
					<text class="size-24 white ml-10" v-if="item.is_show==1&&item.status==2">已上架</text>
					<text class="size-24 white ml-10" v-if="item.is_show==0&&item.status==2">已下架</text>
				</view>
			</view>
		</view>
		<u-popup v-model="transferShow" mode="center" border-radius="20">
			<view class="plr-10 ptb-30">
				<view class="text-center bold size-32 bold">转赠</view>
				<u-field v-model="transferPhone" label-width="0" placeholder="请输入受赠人手机号" />
				<u-button @click="submitTransfer" hover-class="none" type="primary"  class="mt-30">确认</u-button>
			</view>
		</u-popup>
		<!-- 出售 -->
		<u-popup v-model="saleShow" width="90%" mode="center" border-radius="20">
			<view class="plr-10 ptb-30">
				<view class="text-center bold size-32 bold">出售详情</view>
				<u-field v-model="salePrice"  @input="getShowInput" label="出售价格(￥)" label-width="180"  placeholder="请输入价格" type="number" />
				<view class="flex flex-between mt-20 size-22 gray-1 pl-30">
					<view class="">
						平台服务费{{saleConfig.terrace_rate}}%：
					</view>
					<view class="">
						-￥{{terracePrice.toFixed(2)}}
					</view>
				</view>
				<view class="flex flex-between mt-20 size-22 gray-1 pl-30">
					<view class="">
						作品版税{{saleConfig.author_rate}}%：
					</view>
					<view class="">
						-￥{{authorPrice.toFixed(2)}}
					</view>
				</view>
				<view class="flex flex-between mt-20 size-22 gray-1 pl-30">
					<view class="">
						支付通道使用费{{saleConfig.pay_rate}}%：
					</view>
					<view class="">
						-￥{{payPrice.toFixed(2)}}
					</view>
				</view>
				<view class="flex flex-between mt-20 size-22 gray-1 pl-30">
					<view class="">
						商品出售所得：
					</view>
					<view class="">
						￥{{realPrice.toFixed(2)}}
					</view>
				</view>
				<u-button style="width:590rpx" hover-class="none" type="primary" class="mt-30" @click="submitSale">确认
				</u-button>
			</view>
		</u-popup>
		<!-- 改价 -->
		<u-popup v-model="changeShow" width="90%" mode="center" border-radius="20">
			<view class="plr-30 ptb-30">
				<view class="text-center bold size-32 bold">改价详情</view>
				<u-field v-model="afterPrice" @input="getShowInput" label="出售价格(￥)" label-width="180" placeholder="请输入价格" type="number" />
				<view class="flex flex-between mt-20 size-22 gray-1 pl-30">
					<view class="">
						平台服务费{{saleConfig.terrace_rate}}%：
					</view>
					<view class="">
						-￥{{terracePrice.toFixed(2)}}
					</view>
				</view>
				<view class="flex flex-between mt-20 size-22 gray-1 pl-30">
					<view class="">
						作品版税{{saleConfig.author_rate}}%：
					</view>
					<view class="">
						-￥{{authorPrice.toFixed(2)}}
					</view>
				</view>
				<view class="flex flex-between mt-20 size-22 gray-1 pl-30">
					<view class="">
						支付通道使用费{{saleConfig.pay_rate}}%：
					</view>
					<view class="">
						-￥{{payPrice.toFixed(2)}}
					</view>
				</view>
				<view class="flex flex-between mt-20 size-22 gray-1 pl-30">
					<view class="">
						商品出售所得：
					</view>
					<view class="">
						￥{{realPrice.toFixed(2)}}
					</view>
				</view>
				<u-button style="width:590rpx" hover-class="none" type="primary" class="mt-30" @click="submitChange">确认
				</u-button>
			</view>
		</u-popup>
		<view class="bottom" v-if="list.length!==0">
			到底了～
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				status: '',
				is_trade: 0,
				id:'',
				transferShow: false,
				transferPhone: '',
				transferId: '',
				saleShow: false,
				salePrice: '',
				saleConfig: {},
				terracePrice: 0,
				authorPrice: 0,
				payPrice: 0,
				realPrice: 0,
				changeShow: false,
				afterPrice: '',
			}
		},
		onShow() {
			this.init();
		},
		onLoad:function(options){
			this.id=options.id,
			this.status=options.status
		},
		methods: {
			submitChange() {
				if (this.afterPrice == "") {
					uni.showToast({
						title: "请输入价格!",
						icon: "none"
					})
					return;
				}
				this.$http('/api/orders/goodsUpdatePrice', {
					id: this.changeId,
					price: this.afterPrice
				}, 'POST').then(res => {
					uni.showToast({
						title: "改价成功!",
						icon: "none"
					})
					this.changeShow = false;
					this.init();
				})
			},
			submitSale() {
				if (this.salePrice == "") {
					uni.showToast({
						title: "请输入价格!",
						icon: "none"
					})
					return;
				}
				this.$http('api/orders/boxSale', {
					id: this.saleId,
					price: this.salePrice
				}, 'POST').then(res => {
					uni.showToast({
						title: "出售成功!",
						icon: "none"
					})
					this.saleShow = false;
					this.current = 2;
					this.status = 2;
					this.init();
				})
			},
			getShowInput(e){
				let saleConfig=this.saleConfig;
				this.terracePrice=e*saleConfig.terrace_rate/100;
				this.authorPrice=e*saleConfig.author_rate/100;
				this.payPrice=e*saleConfig.pay_rate/100;
				this.realPrice=e-this.terracePrice-this.authorPrice-this.payPrice;
			},
			submitTransfer() {
				if (this.transferPhone == "") {
					uni.showToast({
						title: "请输入受赠人手机号!",
						icon: "none"
					})
					return;
				}
				this.$http('api/orders/goodsTransfer', {
					id: this.transferId,
					phone: this.transferPhone
				}, 'POST').then(res => {
					uni.showToast({
						title: "转赠成功!",
						icon: "none"
					})
					this.transferShow = false;
					this.current = 5;
					this.status = 5;
					this.init();
				})
			},
			upCollect(item) {
				let _this = this;
				let msg = item.is_show == 1 ? '下架?' : '上架?';
				uni.showModal({
					title: '提示',
					content: '将此藏品' + msg,
					confirmColor: '#EFAA1C',
					success: function(res) {
						if (res.confirm) {
							_this.$http('/api/orders/goodsUpdateShow', {
								id: item.id,
								is_show: item.is_show == 1 ? 0 : 1
							}, 'POST').then(res => {
								uni.showToast({
									title: "操作成功!",
									icon: "none"
								})
								_this.current = 0;
								_this.status=0;
								_this.init();
							})
						} else if (res.cancel) {
							uni.showToast({
								title: "取消操作!",
								icon: "none"
							})
						}
					}
				});
			},
			toSale(item) {
				this.saleId = item.id;
				this.saleShow = true;
				this.salePrice = item.price;
				this.getShowInput(this.salePrice);
			},
			toTransfer(id) {
				this.transferShow = true;
				this.transferPhone='';
				this.transferId = id;
			},
			goDetails(id) {
				uni.navigateTo({
					url: "./collectDetails?id="+id
				})
			},
			init() {
				this.list = [];
				this.$http('/api/orders/usersGoodsListId?status='+this.status+'&id='+this.id, {
					status: this.status,
					id: this.id
				}).then(res => {
					this.list = res;
				})
				
			}	
		}
	}
</script>

<style lang="less" scoped>
.container{
	width: 100%;
	min-height: 100vh !important;
}
.itemImg {
		width: 150rpx;
		height: 150rpx;
	}
.conttop{
		display: flex;
		justify-content: space-between;
		.rightbox{
			display: flex;
			.righticon{
				width: 10rpx !important;
				margin-left: 20rpx;
				margin-top: 6rpx;
			}
		}
	}
.btnWrap {
		::v-deep  uni-button {
			height: 60rpx !important;
			padding: 0 30rpx !important;
			font-size: 22rpx;
			margin-right: 10rpx;
		}

		.transferBtn {
			background: #44ACFF;
			color: #fff;
		}

		.saleBtn {
			border: 1rpx solid #44ACFF;
			background: transparent;
			color: #44ACFF;
		}
	}
.bottom{
	text-align: center;
	font-size: 24rpx;
	margin: 80rpx 0;
	color: #bdbdbd;
}
</style>
